<template>
  <div class="shareInfo" v-if="info">
    <hmNavBar :path="path"></hmNavBar>
    <h3 class="title">{{ info.title }}</h3>
    <div class="content">
      <div class="top">
        <img
          v-if="info.author.avatar"
          :src="$baseUrl + info.author.avatar"
          alt=""
          class="o1"
        />
        <img v-else src="@/assets/logo.png" alt="" class="o1" />
        <div class="o2">
          <div class="name">{{ info.author.nickname }}</div>
          <div class="time">{{ info.updated_at | filtersTime }}</div>
        </div>
      </div>
      <div class="middle" v-html="info.content"></div>
    </div>
    <div class="line"></div>
    <van-list
      class="commit"
      v-model="loading"
      :finished="finished"
      finished-text="到底了"
      @load="load"
    >
      <h3 class="commit-title">评论 <span>87</span></h3>
      <div class="commit-item" v-for="(item, index) in list" :key="index">
        <div class="item-top">
          <img
            v-if="item.author.avatar"
            class="i1"
            :src="$baseUrl + item.author.avatar"
            alt=""
            @click="resend(item)"
          />
          <img
            v-else
            class="i1"
            @click="resend(item)"
            src="@/assets/logo.png"
            alt=""
          />
          <div class="i2">
            <div class="name">{{ item.author.nickname }}</div>
            <div class="time">{{ item.created_at | filtersTime }}</div>
          </div>
          <div
            class="i3"
            :class="{ red: userInfo.starComments.includes(item.id) }"
          >
            {{ item.star }}
          </div>
          <div
            class="i4 iconfont"
            :class="{ red: userInfo.starComments.includes(item.id) }"
            @click="commitStarEvent(item)"
          >
            &#xe650;
          </div>
        </div>
        <div class="item-middle">{{ item.content }}</div>
        <div class="item-bottom">
          <div
            class="bottom-item"
            v-for="(item2, index2) in item.children_comments"
            :key="index2"
          >
            <div class="b1">{{ item2.author }}:</div>
            <div class="b2">{{ item2.content }}</div>
          </div>
        </div>
      </div>
    </van-list>
    <div class="send">
      <div class="s1">
        <h3 @click="popup">我来说两句</h3>
      </div>
      <div
        class="s2"
        :class="{ red: userInfo.collectArticles.includes(info.id) }"
      >
        <div class="iconfont" @click="collectEvent">&#xe649;</div>
        <div class="num">{{ info.collect }}</div>
      </div>
      <div class="s2" :class="{ red: userInfo.starArticles.includes(info.id) }">
        <div class="iconfont" @click="starEvent">&#xe650;</div>
        <div class="num">
          {{ info.star }}
        </div>
      </div>

      <div class="s2">
        <div class="iconfont">&#xe63e;</div>
        <div class="num" v-if="info.share === 'null'">{{ info.share }}</div>
        <div class="num" v-else>0</div>
      </div>
    </div>
    <van-popup v-model="show" position="bottom">
      <div class="send-area">
        <van-field
          class="input"
          v-model="inputValue"
          rows="5"
          type="textarea"
          placeholder="我来说两句"
        ></van-field>
        <!-- 有内容才有点击事件并且颜色是红色 -->
        <div v-if="inputValue.length <= 0" class="btn-send">
          <span>发送</span>
        </div>
        <div v-else class="btn-send red" @click="send"><span>发送</span></div>
      </div>
    </van-popup>
  </div>
</template>
<script>
// 导入api
import {
  articlesShareId,
  articlesCommentsId,
  articlesComments,
  articleStar,
  articlesCollect,
  articleCommentsStar
} from '@/api/find'
// 导入辅助函数
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['userInfo'])
  },
  data () {
    return {
      // 回跳参数
      path: this.$route.query.repath,
      //   接收文章的id
      id: this.$route.params.id,
      info: '', // 存储文章数据
      //   下拉属性
      loading: false,
      finished: false,
      //   分页
      currPage: 1,
      pageSize: 2,
      list: [],
      //   弹出层
      show: false,
      // 输入框
      inputValue: '',
      //   回复评论的参数
      parent: ''
    }
  },
  methods: {
    async load () {
      //   封装组件
      const res = await articlesCommentsId(
        {
          start: (this.currPage - 1) * this.pageSize,
          limit: this.pageSize
        },
        this.id
      )
      //   分页加加
      this.currPage++
      this.list.push(...res.data.data.list)
      if (this.list.length >= res.data.data.total) {
        this.finished = true
      }

      this.loading = false
      console.log(res)
    },
    popup () {
      this.show = true
    },
    async send () {
      // 封装发表评论的api
      //   发送请求
      // 关闭弹窗
      // 数据添加到数组第一条
      const res = await articlesComments({
        content: this.inputValue,
        article: this.id,
        parent: this.parent
      })
      console.log(res)
      this.show = false
      //   判断回复的参数是否为空,就是发表评论,否则回复评论
      if (this.parent === '') {
        //   添加点赞属性
        res.data.data.star = 0
        this.list.unshift(res.data.data)
      } else {
        const _index = this.list.findIndex((item, index) => {
          return item.id === this.parent
        })
        this.list[_index].children_comments.unshift(res.data.data)
      }
    },
    // 点击头像回复评论
    resend (item) {
      // 把该对象的id赋值给参数parent
      this.parent = item.id
      //   打开弹出层
      this.show = true
    },
    // 点赞事件
    async starEvent () {
      // 发送请求,如果请求回来的数据有该id点赞成功没有,取消点赞成功
      this.$toast.loading({
        duration: 0
      })
      const res = await articleStar({ article: this.info.id })
      const _src = res.data.data.list.includes(this.info.id)
      if (_src) {
        this.$toast.success('点赞成功')
      } else {
        this.$toast.success('取消点赞成功')
      }
      // 修改Info里的点赞总数
      this.info.star = res.data.data.num
      // 刷新userInfo的数据
      this.$store.dispatch('refreshUserInfo')

      console.log(res)
    },
    // 收藏事件
    async collectEvent () {
      // 发送请求,如果请求回来的数据有该id点赞成功没有,取消点赞成功
      this.$toast.loading({
        duration: 0
      })
      const res = await articlesCollect({ id: this.info.id })
      const _src = res.data.data.list.includes(this.info.id)
      if (_src) {
        this.$toast.success('收藏成功')
      } else {
        this.$toast.success('取消收藏成功')
      }
      // 修改Info里的点赞总数
      this.info.collect = res.data.data.num
      // 刷新userInfo的数据
      this.$store.dispatch('refreshUserInfo')

      console.log(res)
    },
    // 评论里的点赞
    async commitStarEvent (item) {
      console.log('评论', item)
      const res = await articleCommentsStar({ id: item.id })
      console.log(res)

      const _src = res.data.data.list.includes(item.id)
      if (_src) {
        this.$toast.success('点赞成功')
      } else {
        this.$toast.success('取消点赞成功')
      }
      // 修改Info里的点赞总数
      item.star = res.data.data.num
      // 刷新userInfo的数据
      this.$store.dispatch('refreshUserInfo')

      console.log(res)
    }
  },
  watch: {
    //   监听弹出层关闭清空文本框
    show () {
      if (this.show === false) {
        this.inputValue = ''
      }
    }
  },
  async created () {
    //   获取文章数据,封装api
    // alert(this.id)
    const res = await articlesShareId(this.id)
    console.log('info', res)
    this.info = res.data.data
  }
}
</script>
<style lang="less" scoped>
.shareInfo {
  .title {
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    color: #181a39;
    line-height: 25px;
    margin-top: 19px;
    margin-bottom: 6px;
    padding: 0 @p15 10px;
  }
  .content {
    padding: 0 @p15;
    .top {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .o1 {
        width: 35px;
        height: 35px;
        opacity: 1;
        border-radius: 50%;
        margin-right: 10px;
      }
      .o2 {
        .name {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          color: #545671;
          line-height: 16px;
          letter-spacing: 0px;
        }
        .time {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #b4b4bd;
          line-height: 16px;
          letter-spacing: 0px;
        }
      }
    }
    .middle {
      ::v-deep img {
        width: 100%;
      }
    }
  }
  .line {
    height: 20px;
    width: 100%;
    background-color: #f7f4f5;
  }
  .commit {
    padding: 0 @p15 60px;
    margin-top: 25px;
    // margin-bottom: 60px;

    .commit-title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #222222;
      line-height: 25px;
      letter-spacing: 0px;
      position: relative;
      span {
        position: absolute;
        top: -8px;
        left: 40px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #b4b4bd;
        line-height: 33px;
        letter-spacing: 0px;
      }
    }
    .commit-item {
      .item-top {
        display: flex;
        align-items: center;
        margin-bottom: 11px;
        margin-top: 30px;
        .i1 {
          width: 35px;
          height: 35px;
          border-radius: 50%;
          margin-right: 5px;
        }
        .i2 {
          flex: 1;
          .name {
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Semibold;
            font-weight: 600;
            text-align: left;
            color: #545671;
            line-height: 16px;
            letter-spacing: 0px;
          }
          .time {
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: #b4b4bd;
            line-height: 16px;
            letter-spacing: 0px;
          }
        }
        .i3 {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #b4b4bd;
          line-height: 16px;
          letter-spacing: 0px;
          margin-right: 5px;
        }
        .i4 {
          font-size: 24px;
        }
      }
      .item-middle {
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: justify;
        color: #181a39;
        line-height: 27px;
        letter-spacing: 0px;
        padding-bottom: 10px;
        padding-left: 40px;
        // 标点符号文字强制换行
        word-break: break-all;
        word-wrap: break-word;
      }
      .item-bottom {
        padding-left: 40px;

        .bottom-item {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 400;
          text-align: left;
          color: #545671;
          line-height: 20px;
          letter-spacing: 0px;
          background-color: #f7f4f5;
          // 标点符号文字强制换行
          word-break: break-all;
          word-wrap: break-word;

          .b1 {
            padding-right: 5px;
            font-weight: 600;
            padding: 15px;
          }
        }
      }
    }
  }
  .send {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    color: #ccc;
    font-size: 12px;
    background-color: #fff;
    padding: 0 @p15;
    .s1 {
      flex: 1;
      background-color: #f7f4f5;
      padding: 10px;
      margin-right: 20px;
    }
    .s2 {
      width: 30px;

      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: center;
      color: #b4b4bd;
      line-height: 16px;
      letter-spacing: 0px;
      margin-right: 5px;

      .iconfont {
        font-size: 28px;
        margin-bottom: 5px;
      }
    }
  }
  .send-area {
    padding: 25px @p15;
    .input {
      background-color: #f7f4f5;
    }
    .btn-send {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #b4b4bd;
      text-align: right;
      line-height: 22px;
      letter-spacing: 0px;
      margin-top: 10px;
    }
    .red {
      color: red;
    }
  }
  .red {
    color: red !important;
  }
}
</style>
